<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药品管理系统 - 首页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #606266;
        }
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo-area {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }
        .system-name {
            font-size: 22px;
            font-weight: bold;
        }
        .nav-menu {
            display: flex;
            background-color: #304156;
            padding: 0 20px;
        }
        .nav-item {
            padding: 15px 20px;
            color: #bfcbd9;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-item:hover, .nav-item.active {
            color: #409EFF;
            background-color: #263445;
            border-bottom: 2px solid #409EFF;
        }
        .main-content {
            flex: 1;
            padding: 20px;
        }
        .card-container {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .overview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .overview-card {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            align-items: center;
        }
        .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
            color: white;
        }
        .card-info {
            flex: 1;
        }
        .card-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 5px;
        }
        .card-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
        .card-footer {
            font-size: 12px;
            color: #67C23A;
            margin-top: 5px;
        }
        .card-footer.warning {
            color: #E6A23C;
        }
        .card-footer.danger {
            color: #F56C6C;
        }
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .quick-action {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .quick-action:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .action-icon {
            font-size: 36px;
            margin-bottom: 10px;
            color: #409EFF;
        }
        .action-title {
            font-size: 16px;
            font-weight: bold;
        }
        .table-container {
            margin-top: 20px;
        }
        .warning-row {
            background-color: #fdf6ec !important;
        }
        .footer {
            text-align: center;
            padding: 15px 0;
            color: #909399;
            font-size: 14px;
            background-color: #f5f7fa;
            border-top: 1px solid #e6e6e6;
        }
        .virtual-link {
            color: #909399;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <header class="header">
        <div class="logo-area">
            <div class="logo">药</div>
            <div class="system-name">药品管理系统</div>
        </div>
        <div>
            <el-dropdown @command="handleUserCommand">
        <span class="el-dropdown-link" style="color: white; cursor: pointer;">
          {{ currentUser.username }} ({{ formatRole(currentUser.role) }})<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>

    <nav class="nav-menu">
        <div class="nav-item" :class="{active: activeNav === 'dashboard'}">首页</div>
        <div class="nav-item" :class="{active: activeNav === 'medicine'}" @click="navigateTo('medicine.html')">药品管理</div>
        <div class="nav-item" :class="{active: activeNav === 'inventory'}" @click="navigateTo('inventory.html')">库存管理</div>
        <div class="nav-item" :class="{active: activeNav === 'sale'}" @click="navigateTo('sale.html')">销售管理</div>
        <div class="nav-item" :class="{active: activeNav === 'user'}" @click="navigateTo('user.html')">用户管理</div>
        <div class="nav-item" :class="{active: activeNav === 'log'}" @click="navigateTo('log.html')">操作日志</div>
    </nav>

    <main class="main-content">
        <h2 style="margin-bottom: 20px;">系统概览</h2>

        <div class="overview-cards">
            <div class="overview-card">
                <div class="card-icon" style="background-color: #409EFF;">
                    <i class="el-icon-first-aid-kit"></i>
                </div>
                <div class="card-info">
                    <div class="card-title">药品总数</div>
                    <div class="card-value">{{ overviewData.medicineCount || 0 }}</div>
                    <div class="card-footer">所有药品数量</div>
                </div>
            </div>

            <div class="overview-card">
                <div class="card-icon" style="background-color: #67C23A;">
                    <i class="el-icon-goods"></i>
                </div>
                <div class="card-info">
                    <div class="card-title">今日销售额</div>
                    <div class="card-value">¥{{ overviewData.todaySales || 0 }}</div>
                    <div class="card-footer">今日总销售额</div>
                </div>
            </div>

            <div class="overview-card">
                <div class="card-icon" style="background-color: #E6A23C;">
                    <i class="el-icon-warning"></i>
                </div>
                <div class="card-info">
                    <div class="card-title">库存预警</div>
                    <div class="card-value">{{ overviewData.lowStockCount || 0 }}</div>
                    <div class="card-footer danger" v-if="overviewData.lowStockCount > 0">需要立即处理</div>
                    <div class="card-footer" v-else>库存正常</div>
                </div>
            </div>
        </div>

        <div class="quick-actions">
            <div class="quick-action" @click="navigateTo('medicine.html')">
                <div class="action-icon"><i class="el-icon-first-aid-kit"></i></div>
                <div class="action-title">药品管理</div>
                <div>管理药品信息</div>
            </div>

            <div class="quick-action" @click="navigateTo('inventory.html')">
                <div class="action-icon"><i class="el-icon-office-building"></i></div>
                <div class="action-title">库存管理</div>
                <div>查看和调整库存</div>
            </div>

            <div class="quick-action" @click="navigateTo('sale.html')">
                <div class="action-icon"><i class="el-icon-shopping-cart-full"></i></div>
                <div class="action-title">销售管理</div>
                <div>处理销售记录</div>
            </div>

            <div class="quick-action" @click="navigateTo('user.html')" v-if="currentUser.role === 'admin'">
                <div class="action-icon"><i class="el-icon-user"></i></div>
                <div class="action-title">用户管理</div>
                <div>管理系统用户</div>
            </div>
        </div>

        <div class="card-container">
            <h3>库存预警药品</h3>
            <div class="table-container">
                <el-table :data="lowStockMedicines" border stripe v-loading="loading">
                    <el-table-column prop="medicineCode" label="药品编码" width="120"></el-table-column>
                    <el-table-column prop="medicineName" label="药品名称" min-width="150"></el-table-column>
                    <el-table-column prop="currentStock" label="当前库存" width="100">
                        <template slot-scope="scope">
              <span :class="{'danger-text': scope.row.currentStock <= scope.row.minStock}">
                {{ scope.row.currentStock }}
              </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="minStock" label="最低库存" width="100"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag size="small" :type="scope.row.currentStock <= scope.row.minStock ? 'danger' : 'warning'">
                                {{ scope.row.currentStock <= scope.row.minStock ? '缺货' : '预警' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="navigateToInventory(scope.row.medicineId)">补货</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div style="margin-top: 15px; text-align: center;" v-if="lowStockMedicines.length === 0">
                <i class="el-icon-success" style="color: #67C23A; font-size: 24px;"></i>
                <p>暂无库存预警药品</p>
            </div>
        </div>
    </main>

    <footer class="footer">© 2023 药品管理系统 - 版权所有</footer>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeNav: 'dashboard',
                currentUser: { id: null, username: '', role: '' },
                overviewData: {
                    medicineCount: 0,
                    todaySales: 0,
                    lowStockCount: 0
                },
                lowStockMedicines: [],
                loading: false
            };
        },
        mounted() {
            this.loadCurrentUser();
            this.loadOverviewData();
            this.loadLowStockMedicines();
        },
        methods: {
            loadCurrentUser() {
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.currentUser = JSON.parse(savedUser);
                } else {
                    axios.get('/pms/user/current').then(response => {
                        if (response.data.success) {
                            this.currentUser = response.data.data;
                            localStorage.setItem('currentUser', JSON.stringify(response.data.data));
                        } else {
                            window.location.href = 'login.html';
                        }
                    }).catch(() => {
                        window.location.href = 'login.html';
                    });
                }
            },

            loadOverviewData() {
                // 获取药品总数
                axios.get('/pms/medicine/list').then(response => {
                    if (response.data.success) {
                        this.overviewData.medicineCount = response.data.data.length;
                    }
                }).catch(error => {
                    console.error('获取药品总数失败:', error);
                });

                // 获取今日销售额
                const today = new Date();
                const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);

                axios.get('/pms/sale/statistics', {
                    params: {
                        startDate: startDate.toISOString().split('T')[0],
                        endDate: endDate.toISOString().split('T')[0]
                    }
                }).then(response => {
                    if (response.data.success) {
                        this.overviewData.todaySales = response.data.totalSales || 0;
                    }
                }).catch(error => {
                    console.error('获取今日销售额失败:', error);
                });

                // 获取低库存数量
                axios.get('/pms/inventory/low-stock').then(response => {
                    if (response.data.success) {
                        this.overviewData.lowStockCount = response.data.data.length;
                    }
                }).catch(error => {
                    console.error('获取低库存数量失败:', error);
                });
            },

            loadLowStockMedicines() {
                this.loading = true;
                axios.get('/pms/inventory/low-stock').then(response => {
                    if (response.data.success) {
                        this.lowStockMedicines = response.data.data;
                    } else {
                        this.$message.error(response.data.message);
                    }
                    this.loading = false;
                }).catch(error => {
                    console.error('获取低库存药品失败:', error);
                    this.$message.error('获取低库存药品失败');
                    this.loading = false;
                });
            },

            navigateTo(url) {
                window.location.href = url;
            },

            navigateToInventory(medicineId) {
                window.location.href = `inventory.html?medicineId=${medicineId}`;
            },

            handleUserCommand(command) {
                if (command === 'profile') {
                    window.location.href = 'profile.html';
                } else if (command === 'logout') {
                    this.handleLogout();
                }
            },

            handleLogout() {
                axios.post('/pms/user/logout').then(response => {
                    if (response.data.success) {
                        this.$message.success(response.data.message);
                        localStorage.removeItem('currentUser');
                        window.location.href = 'login.html';
                    }
                }).catch(error => {
                    console.error('退出登录失败:', error);
                });
            },

            formatRole(role) {
                const roleMap = { 'admin': '管理员', 'sales': '销售员', 'inventory': '库存管理员' };
                return roleMap[role] || role;
            }
        }
    });
</script>
</body>
</html>